<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>选择发送对象</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="renderer" content="webkit">
    <link href="${pageContext.request.contextPath}/static/css/common.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/layer/skin/layer.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/bootstrap-3.3.5/css/bootstrap.min.css"
          rel="stylesheet">
          <link href="${pageContext.request.contextPath}/static/plugins/select2-4.0.0/dist/css/select2.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/font-awesome-4.3.0/css/font-awesome.min.css"
          rel="stylesheet">
          <link rel="stylesheet" href="${pageContext.request.contextPath}/static/plugins/jquery.time/jquery.timepicker.min.css">
    <script src="${pageContext.request.contextPath}/static/js/jquery-1.11.3.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/plugins/bootstrap-3.3.5/js/bootstrap.min.js"></script>
    <script src="/static/plugins/bootstrap-3.3.5/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/plugins/layer/layer.js" type="text/javascript"></script>
	<script src="${pageContext.request.contextPath}/static/plugins/select2-4.0.0/dist/js/select2.min.js"></script>
	<script src="${pageContext.request.contextPath}/static/plugins/My97DatePicker/WdatePicker.js"
        type="text/javascript"></script>
	<script src="${pageContext.request.contextPath}/static/plugins/jquery.time/jquery.timepicker.min.js"
        type="text/javascript"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/global.js"></script>
	<style type="text/css">
	*,h3{margin:0;padding:0;}
	
	.clearfix{
		overflow:hidden;
	}
	.lt{
		float:left;
	}
	.rt{
		float:right;
	}
	.wraper,.content{
		width:980px;
		margin:0 auto;
		box-size:border-box;
	}
	.header,.index,.object,.all{
		width:980px;
		margin:0 auto;
		border:1px solid #ccc;
		margin-top:20px;
	}
	.header{
		padding:20px;
		font-size:20px;
		color:#000;
	}
	 .btn{
		margin:0 20px;
		background:#fff !important;
		color:#000 !important;
		border:1px solid #ccc;
		width:100px;
	}
	.content{
		position:relative;
	}
	.content .index{
		height:500px;
		line-height:500px;
		text-align:center;
		color:#666;
		font-size:20px;
	}
	.wraper .active{
		color:#fff !important;
		background:#54b1ff !important;
	}
	.all{
		padding-bottom:180px;
	}
	.all_box{
		width:600px;
		margin:0 auto;
		
	}
	.pic_box{
		text-align:center;
		padding-top:90px;
	}
	.txt{
		text-align:center;
		color:#666;
		font-size:20px;
		padding-top:20px;
	}
	.object{
		padding:0 0 0 10px;
	}
	.object li{
		color:#333;
		font-size:16px;
	}
	a{
		color:#333;
		display:inline-block;
		width:95%;
		padding:10px 0 ;
		background:url(${pageContext.request.contextPath}/static/images/admin/wallet/arrow1_05.jpg) no-repeat 100% center;
		border-bottom:1px solid #ccc;
		transition:background 0.2s;
		-moz-transition: background 0.2s;	/* Firefox 4 */
		-webkit-transition: background 0.2s;	/* Safari 和 Chrome */
		-o-transition: background 0.2s;	/* Opera */
	}
	.object li span{
		display:inline-block;
		width:15px;
		height:15px;
		*+width:16px;
		*+height:16px;
		line-height:14px;
		border:1px solid #ccc;
		border-radius:50%;
		vertical-align: middle;
		margin-right:4px;
	}
	.bottom{
		width:800px;
		text-align:center;
		margin:20px auto;
	}
	.bottom .btn{
		width:80px;
	}
	.level2,.level3,.level4{
		margin-left:20px;
	}
	.level4{
		overflow:hidden;
		
	}
	.level5 li div{
		float:left;
		width:80px;
		height:30px;
		line-height:30px;
		text-align:center;
		border:1px solid #ccc;
		border-radius:4px;
		margin:8px 10px;
		cursor:pointer;
	}
	.wraper .act{
		color:red;
		border-color:red;
	}
	/**全部选中时候**/
	.wraper .act1{
		background:#d74040;
	}
	/**部分选中时候**/
	.wraper .act2{
		background:#f8a2a2;
	}
	input[type=checkbox]{
		 filter:alpha(opacity=0); 
		 opacity: 0;   
		 vertical-align: middle;  
	}
	</style>
<body>
<div class="wraper">
	<div class="header">
		选择发送对象:<input type="button" class="btn" value="选择全部对象" id="btn1"/>
					<input type="button" class="btn" id="btn2" value="选择部分对象"/>
	</div>
	<div class="content">
		<div class="index">
		亲，请先在左上角点选红包发送对象哦~
		</div>
		<div class="all">
			<div class="all_box">
				<div class="pic_box">
					<img alt="" src="${pageContext.request.contextPath}/static/images/admin/wallet/obj_03.jpg" />
				</div>
				
				<div class="txt">
				
				亲，您选择全部对象是层级下所有对象都可以领取您的红包哦~</div>
			</div>
		</div>
		<div class="object">
			<ul class="menu1">
				<li class="level1">
					<span onclick="changStat(this)" id="checkbox1"><input type="checkbox"/></span>
					<a class="company" onclick="showT(this)">某某物业公司1</a>
					<ul class="level2">
						<li>
							<span onclick="changStat(this)" id="checkbox2"><input type="checkbox"/></span>
							<a onclick="showT(this)">某某小区名称</a>
							<ul class="level3">
								<li>
									<span onclick="changStat(this)" id="checkbox3"><input type="checkbox"/></span>
									<a onclick="showT(this)">某某小区1栋</a>
									<ul class="level4">
												<li>
													<span onclick="changStat(this)" id="checkbox5"><input type="checkbox"/></span>
													<a onclick="showT(this)">1栋1单元</a>
													<ul class="level5">
														<li>
															<div>101室</div>
															<div>101室</div>
															<div>101室</div>
															<div>101室</div>
															<div>101室</div>
															<div>101室</div>
															<div>101室</div>
															<div>101室</div>
															<div>101室</div>
															<div>101室</div>
															<div>101室</div>
															<div>101室</div>
														</li>
														
													</ul>
												</li>
												<li>
													<span onclick="changStat(this)" id="checkbox5"><input type="checkbox"/></span>
													<a onclick="showT(this)">1栋2单元</a>
													<ul class="level5">
														<li>
															<div>101室</div>
															<div>101室</div>
															<div>101室</div>
															<div>101室</div>
															<div>101室</div>
															<div>101室</div>
															<div>101室</div>
															<div>101室</div>
															<div>101室</div>
															<div>101室</div>
															<div>101室</div>
															<div>101室</div>
														</li>
														
													</ul>
												</li>
											</ul>
								</li>
								<li>
									<span onclick="changStat(this)"><input type="checkbox"/></span>
									<a>某某小区2栋</a>
								</li>
								<li>
									<span onclick="changStat(this)"><input type="checkbox"/></span>
									<a>某某小区3栋</a>
								</li>
								<li>
									<span onclick="changStat(this)"><input type="checkbox"/></span>
									<a>某某小区4栋</a>
								</li>
							</ul>
						</li>
						<li>
							<span onclick="changStat(this)"><input type="checkbox"/></span>
							<a>某某小区名称</a>
						</li>
						<li>
							<span><input type="checkbox"/></span>
							<a>某某小区名称</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		
	</div>
	<div class="bottom"><input type="button" class="btn" value="确定" id="true"/></div>
</div>	 
<script type="text/javascript">
	function showT(thisbtn){
		var btn=thisbtn;
		$(btn).next().slideToggle("slow");
		var pic1="url(${pageContext.request.contextPath}/static/images/admin/wallet/arrow1_05.jpg) no-repeat right center";
		var pic2="url(${pageContext.request.contextPath}/static/images/admin/wallet/arrow2_03.jpg) no-repeat right center";
		var style=$(btn).css("backgroundImage");
		if(style.indexOf("arrow1_05.jpg")>-1){
			btn.style.background=pic2
		}else{
			btn.style.background=pic1
		}
	};
	$(".level4 a").click(function(){
		if($(this).parent().find("span").hasClass("act1")){
			$(this).siblings().find("li div").addClass("act");
		}else{
			$(this).siblings().find("li div").removeClass("act");
		}
	});
	
	$(".all").hide();
	$(".level2").hide();
	$(".level3").hide();
	$(".level4").hide();
	$(".level5").hide();
	$(".object").hide();
	
	
	//点击全部对象和部分对象的切换
	$("#btn1").click(function(){
		$(this).addClass("active").siblings().removeClass("active");
		$(".all").show().siblings().hide();
		$("#true").addClass("active");
	})
	$("#btn2").click(function(){
		$(this).addClass("active").siblings().removeClass("active");
		$(".object").show().siblings().hide();
		$("#true").addClass("active");
	});
	//全部房间的全选功能
	$(".level5 li div").click(function(){
		var num=0,len;
		var $li=$(this).siblings();
			len=$li.length;
		for(var i=0;i<len;i++){
			if($li[i].className.indexOf("act") > -1){
				num+=1;
			}
		}//num为兄弟级选中的个数
		if($(this).hasClass("act")){
			var par=$(this).parent().parent().parent().find("span")[0];
			$(this).removeClass("act");
			$(".chooseAll").removeClass("act");
			$(this).parent().parent().parent().find("span").removeClass("act1");
			if(num!=0){
				$(this).parent().parent().parent().find("span").addClass("act2");
				 parent1(par);
			}else{
				$(this).parent().parent().parent().find("span").removeClass("act2");
				 parent1(par);
			}
		}else{
			var par=$(this).parent().parent().parent().find("span")[0];
			$(this).addClass("act");
			$(this).parent().parent().parent().find("input[type=checkbox]")[0].checked=true;
			
			
			//部分选中
			if(num==len){
				$(this).parent().parent().parent().find("span").addClass("act1");
				$(this).parent().parent().parent().find("span").removeClass("act2");
				 parent2(par);
			}else{
				$(this).parent().parent().find("span").removeClass("act1");
				$(this).parent().parent().parent().find("span").addClass("act2");
				 parent2(par);
			}
			
		};
				
	});
	function parent1(sth){
		var b=sth;
		var flag=true;
		var $bro=$(b).parent().siblings().find("span");//兄弟集
		var farther=$(b).parent().parent().parent().find("span")[0];
		for(var j=farther;j!=$("#checkbox1")[0];j=$(j).parent().parent().parent().find("span")[0]){
			if(b.className.indexOf("act2") > -1){
				flag=false;
			}else{
			for(var i=0;i<$bro.length;i++){
				if($bro[i].className.indexOf("act") > -1){
					flag=false;//当任何一个兄弟集被选中时 flag=false；
					break;
				}
		    } 
		}
			if(flag){
				$(j).removeClass("act2");
			}else{
				$(j).removeClass("act1");
				$(j).addClass("act2");
			}
			$bro=$(j).parent().siblings().find("span");//兄弟集
		}
		//最外层
		var topSpan=$("#checkbox1")[0];
		
		for(var i=0;i<$bro.length;i++){
			if($bro[i].className.indexOf("act") > -1){
				flag=false;//当任何一个兄弟集被选中时 flag=false；
				break;
			}
	    } 
		if(flag){
			$(topSpan).removeClass("act2");
		}else{
			$(topSpan).removeClass("act1");
			$(topSpan).addClass("act2");
		}	
		
	}
	function parent2(sth){
		var b=sth;
		var flag=true;
		var $bro=$(b).parent().siblings().find("span");//兄弟集
		var farther=$(b).parent().parent().parent().find("span")[0];
		for(var j=farther;j!=$("#checkbox1")[0];j=$(j).parent().parent().parent().find("span")[0]){
		if(b.className.indexOf("act2") >-1){
			flag=false;
		}else{
			for(var i=0;i<$bro.length;i++){
				if($bro[i].className.indexOf("act1") == -1){
					flag=false;//自己全部选中了，兄弟集存在没被全部选中的
					break;
				}
		    }
		}
			if(flag){
				$(j).addClass("act1");
				$(j).removeClass("act2");
			}else{
				$(j).addClass("act2");
			}
			
			$bro=$(j).parent().siblings().find("span");//兄弟集
		}
		//最外层
		var topSpan=$("#checkbox1")[0];
		
		for(var i=0;i<$bro.length;i++){
			if($bro[i].className.indexOf("act1") == -1){
				flag=false;//自己全部选中了，兄弟集存在没被全部选中的
				break;
			}
	    }
		if(flag){
			$(topSpan).addClass("act1");
			$(topSpan).removeClass("act2");
		}else{
			$(topSpan).addClass("act2");
		}
	}
	//console.log($("#checkbox1").parent().parent().parent().find("span")[0]);
	function changStat(args){
		if(args==null){
			return;
		}
		var element=args;
		var $bro=$(element).parent().siblings().find("span");//兄弟集
		var farther=$($(element).parent().parent().parent().find("span"))[0];//父级
		var flag=true;
		//点击时查看子集是否是选中状态，如子集是全部选中状态则把子集变成未选中状态，自己也变成未选中状态，
		//如子集是部分选中则把子集变成全部选中自己也是全部选中，如子集是未被选中状态则把子集变成全选状态，自己也是全选状态
		
		if(element.className.indexOf("act1") >-1){
			//点击时自己是全选状态时去掉自己的全选状态，去掉父级的全选状态，然后判断兄弟级的状态
			$(element).removeClass("act1");
			$(element).removeClass("act2");
			$(farther).removeClass("act1");
			
			var tim=$(element).parent().find("ul li span");//子集
			var lens=tim.length;
			var span=$(".level4 span");
			for(var i=0;i<lens;i++){
				$(tim[i]).removeClass("act1");
				$(tim[i]).removeClass("act2");
				
			}
			
			for(var j=0;j<span.length;j++){
				if(element==$(".level4 span")[j]){
					$(element).siblings().find("li div").removeClass("act");
				}
			}
			if(element==$("#checkbox1")[0]){
				return;
			}
			if(element==$(".level4 li span")[0]){
				$(element).siblings().find("li div").removeClass("act");
			}
			for(var j=farther;j!=$("#checkbox1")[0];j=$(j).parent().parent().parent().find("span")[0]){
				
				for(var i=0;i<$bro.length;i++){
					if($bro[i].className.indexOf("act") > -1){
						flag=false;//当任何一个兄弟集被选中时 flag=false；
						break;
					}
			    } 
				if(flag){
					$(j).removeClass("act2");
				}else{
					$(j).removeClass("act1");
					$(j).addClass("act2");
				}
				$bro=$(j).parent().siblings().find("span");//兄弟集
			}
			
			//最外层
			var topSpan=$("#checkbox1")[0];
			
			for(var i=0;i<$bro.length;i++){
				if($bro[i].className.indexOf("act") > -1){
					flag=false;//当任何一个兄弟集被选中时 flag=false；
					break;
				}
		    } 
			if(flag){
				$(topSpan).removeClass("act2");
			}else{
				$(topSpan).removeClass("act1");
				$(topSpan).addClass("act2");
			}			
			
		}else{//点击时是不选中状态，点击后为选中状态
			$(element).removeClass("act2");
			$(element).addClass("act1");
			
			var tim=$(element).parent().find("ul li span");//子集
			for(var i=0;i<tim.length;i++){
				$(tim[i]).addClass("act1");
				$(tim[i]).removeClass("act2");
			};
			var span=$(".level4 span");
			for(var j=0;j<span.length;j++){
				if(element==$(".level4 span")[j]){
					$(element).siblings().find("li div").addClass("act");
				}
			}
			
			if(element==$("#checkbox1")[0]){
				return;
			}
			//修改父级状态
			for(var j=farther;j!=$("#checkbox1")[0];j=$(j).parent().parent().parent().find("span")[0]){
				
				for(var i=0;i<$bro.length;i++){
					if($bro[i].className.indexOf("act1") == -1){
						flag=false;//自己全部选中了，兄弟集存在没被全部选中的
						break;
					}
			    }
				if(flag){
					$(j).addClass("act1");
					$(j).removeClass("act2");
				}else{
					$(j).addClass("act2");
				}
				
				$bro=$(j).parent().siblings().find("span");//兄弟集
			}
			
			//最外层
			var topSpan=$("#checkbox1")[0];
			
			for(var i=0;i<$bro.length;i++){
				if($bro[i].className.indexOf("act1") == -1){
					flag=false;//自己全部选中了，兄弟集存在没被全部选中的
					break;
				}
		    }
			if(flag){
				$(topSpan).addClass("act1");
				$(topSpan).removeClass("act2");
			}else{
				$(topSpan).addClass("act2");
			}
			
		}
	}
</script>
</body>
</html>
